<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px;">
            <el-tooltip effect="dark" content="新增字典信息" placement="bottom">
                <el-button type="success" @click="openWindow('dictionariesChild',null)" icon="el-icon-plus">新增字典</el-button>
            </el-tooltip>
        </div>
        <div style="margin: 5px;padding: 5px;">
            <el-table :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="data" v-loading="loading" size="mini" border stripe :height="500">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column prop="name" label="字段名称" align="center"></el-table-column>
                <el-table-column prop="code" label="字段代码" align="center"></el-table-column>
                <el-table-column prop="description" label="字段描述" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="修改字典信息" placement="bottom">
                            <el-button icon="el-icon-edit" size="mini" type="success" @click="openWindow('dictionariesChild',scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin: 5px;padding: 5px;text-align:center">
            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>
        <dictionaries-child ref="dictionariesChild"></dictionaries-child>
    </div>
</template>
<script>

    import { getDictionariesList } from '@/api/system/dictionaries.js'

    export default {
        name:'dictionaries-index',
        components:{
            DictionariesChild:()=>import("@/views/system/dictionaries-child.vue")
        },
        data(){
            return {
                loading:true,
                data:[],
                params:{page:1,size:10,total:0}
            }
        },
        methods:{
            openWindow(name,data){
                if(data == null){
                    this.$refs[name].dictionaries = {};
                }else{
                    this.$refs[name].dictionaries = data;
                }
                this.$refs[name].value = true;
            },
            handleSizeChange(val){
                this.params.size =val;
                this.list(this.params);
            },
            handlePageChange(val){
                this.params.page = val;
                this.list(this.params);
            },
            getDictionariesList(data){
                getDictionariesList(data).then(res=>{
                    if(res.data.success){
                        this.data = res.data.data.rows;
                        this.params.total = res.data.data.total;
                        this.loading = false;
                    }
                });
            }
        },
        created(){
            this.getDictionariesList(this.params);
        }
    }
</script>
<style scoped>

</style>